<script setup>
import { Menu as IconMenu, } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {ref,watch} from 'vue'
const router = useRouter();
const activeIndex = ref();
activeIndex.value = localStorage.getItem("activeIndex")
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    localStorage.setItem("activeIndex", newValue)
}, { immediate: true })
const menu = [
    {
        name: "用户管理",
        path: '/user',
        icon: '',
    },
    {
        name: "投票管理",
        path: '/vote',
        icon: '',
    },
    {
        name: "投票类别管理",
        path: '/type',
        icon: '',
    },
    {
        name: "投票纪录",
        path: '/record',
        icon: '',
    },
    {
        name: "数据统计",
        path: '/HotVote',
        icon: '',
    },
    {
        name: "数据排行",
        path: '/voteRanking',
        icon: '',
    },
]

</script>
<template>
    <div class="content">
        <el-menu active-text-color=" #f3d19e" background-color=" #606266" class="el-menu-vertical-demo"
            :default-active="activeIndex" text-color="#fff" router>
            <el-menu-item v-for="(item, index) in menu" :index="item.path">
                <el-icon>
                    <icon-menu />
                </el-icon>
                <span>{{ item.name }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<style scoped>
.content {
    height: 100vh;
    background-color: #606266;
}
</style>